<template>
  <!--#ifdef APP-PLUS || H5-->
  <view class="status_bar" :style="`background-color: ${opacityVal}`">
    <!-- 这里是状态栏 -->
  </view>
  <!--#endif-->
  <view class="head">
    <!-- 	<view class="search">
					<inputCom prefixIcon="search" placeholder="请输入搜索内容" />
				</view> -->
    <!--#ifdef APP-PLUS || H5-->
    <view
      class="custom-head"
      :style="`background: ${opacityVal}; color: ${textColor}!important;`"
    >
      <!-- 青岛市民中心 -->
    </view>
    <!--#endif-->
    <!-- {{userInfo.post_name}} -->
    <view class="custom-content">
      欢迎您
      {{ userInfo.name ? userInfo.name.slice(0, 1) + '（先生/女士）!' : '' }}
    </view>
    <!--  === '处长' ? '局长' : userInfo.post_name -->
  </view>
</template>

<script setup>
import { ref, computed, toRefs } from 'vue';
import { getDeptDetail } from '@/api/index.js';
import { getCode } from '@/common/sdt.js';
const userInfo = ref({}); //computed(()=>uni.getStorageSync('userInfo'))
const props = defineProps({
  opacity: String
});
const time = ref('2021-11-14 15:28:36');
const { opacity } = toRefs(props);
const opacityVal = computed(() => {
  return `rgba(255,255,255, ${opacity.value})`;
});
const textColor = computed(() => {
  return opacity.value > 0.9 ? '#333' : '#fff';
});
const back = () => {
  uni.navigateBack();
};
userInfo.value = uni.getStorageSync('userInfo') || {};
!userInfo.value.name &&
  getCode(function(res) {
    const data = res.data || {};
    if (data.permission && JSON.stringify(data.permission) == '{}') {
      uni.reLaunch({
        url: '/pages/permission/permission'
      });
      return;
    }
    userInfo.value = data;
  });
</script>

<style lang="scss" scoped>
.status_bar {
  position: fixed;
  top: 0;
  background: v-bind(opacityVal);
  z-index: 1000;

  width: 100%;
  height: var(--status-bar-height);
  width: 100%;
}
.custom-head {
  z-index: 1000;
  top: var(--status-bar-height); //给组件加个上边距
  left: 0;
  width: 100%;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100rpx;
  font-size: 32rpx;
  font-family: Source Han Sans CN;
  font-weight: bold;
  padding-top: 0; // var(--status-bar-height) ;
  color: #ffffff;
}
.icon {
  position: absolute;
  left: 15rpx;
  bottom: 25rpx;
}
.head {
  background: url('@/static/index1/head_bg.png');
  width: 750rpx;
  height: 260rpx;
  background-size: 100% 100%;
  //#ifdef APP-PLUS || H5
  padding-top: 100rpx; //给组件加个上边距
  //#endif
}
.custom-content {
  font-size: 36rpx;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0px 5rpx 19rpx rgba(0, 0, 0, 0.5);
  padding: 105rpx 0 0 54rpx;
}
</style>
